<!DOCTYPE html>
<html>
<body bgcolor="#505050">
<img
	id		="imgMain1" src="" border="0" width="1" height="1"
	style	="position:absolute; left:0px; top:0px"
	onload	='loaded(this.id)'
></img>
<img
	id		="imgMain2" src="" border="0" width="1" height="1"
	style	="position:absolute; left:0px; top:0px"
	onload	='loaded(this.id)'
></img>	
<p	id		="parrafo"></p>
<script type="text/javascript">
	var IMG_ANCHO = 320.0;
	var IMG_ALTO  = 240.0;
	
	var cualquiera	= 0;
	var timer;
	
	function timerfunc () {
		cualquiera += 1;
		console.log ('tratando de cargar imgMain1');
		document.getElementById	("imgMain1").src = "http://190.193.248.12:1337/current" + cualquiera + ".jpg";
		timer = setTimeout (function(){timerfunc()}, 5000);
	}
	
	function acomodar () {
		var w =window.innerWidth  || document.documentElement.clientWidth  || document.body.clientWidth;
		var h =window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 
		
		if (w > h) {
			var delta = h / IMG_ALTO;
			document.getElementById	("imgMain1").width	= IMG_ANCHO * delta; 
			document.getElementById	("imgMain1").height	= h;
		} else {
			var delta = w / IMG_ANCHO;
			document.getElementById	("imgMain1").width	= w; 
			document.getElementById	("imgMain1").height	= IMG_ALTO * delta; 	
		}
	}
	
	function loaded (id) {
		//
	}

	window.onresize = function () {
		acomodar();
	};
	
	acomodar ();
	timer = setTimeout (function(){timerfunc()}, 1);
</script>
</body>
</html>
